<template>
  <van-tabbar v-model="currentIndex" active-color="#19B5FE" route>
    <template v-for="(item, index) in tabbarData" :key="item">
      <van-tabbar-item :to="item.path" :icon="item.icon">
        {{ item.text }}</van-tabbar-item
      >
    </template>
  </van-tabbar>
</template>

<script setup>
import tabbarData from './tabbar';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
//监听路由的改变，改变的时候设置对应的currentIndex
const currentIndex = ref(0);
watch(route, (newRoute) => {
  const index = tabbarData.findIndex((item) => item.path === newRoute.path);
  if (index === -1) return;
  currentIndex.value = index;
});
</script>

<style lang="scss" scoped></style>
